@import '@/assets/css/public';
.skewer1IntervalGraph{
	color:#fff;
	.wrapper{
	  .ctn{
			border: 1px solid #e3e5e4;
			// height: 900px;
			display: flex;
			padding: 10px;
			box-sizing: border-box;
			& > div + div{
				margin-left: 10px;
			}
			.leftCtn{
				flex:1;
				overflow: hidden;
				border: 1px solid #e3e5e4;
				box-sizing: border-box;
				padding: 10px;
			}
			.midCtn{
				flex:2.5;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				& > div + div{
					margin-top: 10px;
				}
				.midCtnTop{
					flex:3;
					overflow: hidden;
					border: 1px solid #e3e5e4;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					& > p{
						font-size: 16px;
						text-align: center;
						border-bottom: 1px solid #e3e5e4;
						box-sizing: border-box;
						padding: 5px 0;
					}
					.midCtnTopWrapper{
						flex:1;
						overflow: hidden;
						padding: 10px;
						box-sizing: border-box;
						// 表格样式
						.el-table td.gutter, .el-table th.gutter{
							// background:#20437a;
						}
						/deep/ .el-table{
							background: transparent;
							&::before{
								display: none;
							}
							.el-table__row{
								background:transparent;
							}
							.el-table__row:nth-child(1) td{
								color:#fbff1e;
							}
							.el-table__row:nth-child(2) td{
								color:#79dd97;
							}
							.el-table__row:nth-child(3) td{
								color:#fd3430;
							}
							.el-table__row:nth-child(4) td{
								color:#fbff1e;
							}
							.el-table__row:nth-child(5) td{
								color:#79dd97;
							}
							.el-table__row:nth-child(6) td{
								color:#fd3430;
							}
							tbody tr:hover>td {
								// background:rgba(51,152,230, .5) !important;
								// border-bottom: 1px solid #467cd0;
								background:transparent;
							}
							tr{
								background: transparent;
								// color:#b1c1dc;
								&:nth-child(even){
									// background-color: #0f1f47;
								}
							}
							&::before{
								// background: #303e5c;
							}
							&::after{
								// background: #303e5c;
							}
							
							th {
								// border-bottom: 1px solid #303e5c;
								color: #fff;
								padding: 3px 0;
							}
							tbody td{
								// border-bottom: 1px solid #303e5c;
								color: #fff;
								padding: 3px 0;
							}
							th>.cell{
								font-size: 12px;
							}
							.el-table__body-wrapper{
								flex:1;
								overflow: auto;
							}
							.el-table__header-wrapper{
								.el-table__header{
									width: 100% !important;
								}
							}
							.el-table__empty-block{
								width: 100% !important;
							}
							.el-table__body-wrapper{
								.el-table__body{
									width: 100% !important;
								}
							}
							th.el-table__cell{
								background: transparent;
							}
							// 设置表格边框颜色
							.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
								// border:1px solid #303e5c;
							}
							.el-table--border, .el-table--group{
								// border:1px solid #303e5c;
							}
						}
					}
				}
				.midCtnBtm{
					display: flex;
					& > div + div{
						margin-left: 10px;
					}
					.midCtnBtm_left{
						flex:1.5;
						overflow: hidden;
						border: 1px solid #e3e5e4;
						padding: 10px;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						// 表格样式
						.el-table td.gutter, .el-table th.gutter{
							// background:#20437a;
						}
						.el-table--border::after, .el-table--group::after{
							width: 0;
						}
						
						/deep/ .el-table td.el-table__cell .cell{
							position: relative;
							.yuanfang{
								height: 80px;
								position: relative;
								& > p:nth-child(1){
									position: absolute;
									top:0;
									left:50%;
									transform: translateX(-50%);
								}
								& > p:nth-child(2){
									position: absolute;
									top:55%;
									right:0;
									transform: translateY(-50%);
								}
							}
							.polygon-icon{
								width: 45px;
								height: 45px;
								position: absolute;
								top:52%;
								left:50%;
								transform: translate(-50%, -50%);
								cursor: pointer;
							}
						}
						/deep/ .el-table{
							background: transparent;
							&::before{
								display: none;
							}
							
							.el-table__row{
								background:transparent;
							}
							tbody tr:hover>td {
								// background:rgba(51,152,230, .5) !important;
								// border-bottom: 1px solid #467cd0;
								background:transparent;
							}
							tr{
								background: transparent;
								// color:#b1c1dc;
								&:nth-child(even){
									// background-color: #0f1f47;
								}
							}
							&::before{
								// background: #303e5c;
							}
							&::after{
								// background: #303e5c;
							}
							
							th {
								// border-bottom: 1px solid #303e5c;
								color: #fff;
								padding: 2px 0;
							}
							tbody td{
								// border-bottom: 1px solid #303e5c;
								color: #fff;
								padding: 3px 0;
							}
							th>.cell{
								font-size: 12px;
							}
							.el-table__body-wrapper{
								flex:1;
								overflow: auto;
							}
							.el-table__header-wrapper{
								.el-table__header{
									width: 100% !important;
								}
							}
							.el-table__empty-block{
								width: 100% !important;
							}
							.el-table__body-wrapper{
								.el-table__body{
									width: 100% !important;
								}
							}
							th.el-table__cell{
								background: transparent;
							}
							// 设置表格边框颜色
							.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
								// border:1px solid #303e5c;
							}
							.el-table--border, .el-table--group{
								// border:1px solid #303e5c;
							}
						}
					}
					.midCtnBtm_right{
						flex:1;
						overflow: hidden;
						border: 1px solid #e3e5e4;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						& > div + div{
							border-top: 1px solid #e3e5e4;
							box-sizing: border-box;
						}
						.midCtnBtm_right_top{
							flex:1;
							overflow: hidden;
							& > p{
								font-size: 16px;
								text-align: center;
								border-bottom: 1px solid #e3e5e4;
								box-sizing: border-box;
								padding: 5px 0;
							}
							& > ul{
								display: flex;
								padding: 10px;
								box-sizing: border-box;
								& > li{
									flex:1;
									overflow: hidden;
									display: flex;
									align-items: center;
									border: 1px solid #e3e5e4;
									// padding: 2px 0;
									box-sizing: border-box;
									margin-top: 5px;
									.icon{
										width: 50px;
										height: 38px;
										& > div{
											transform: scale(.7) !important;
											margin-top: -5px;
										}
									}
								}
							}
						}
						.midCtnBtm_right_mid{
							flex:1;
							overflow: hidden;
							& > p{
								font-size: 16px;
								text-align: center;
								border-bottom: 1px solid #e3e5e4;
								box-sizing: border-box;
								padding: 5px 0;
							}
							& > ul{
								display: flex;
								padding: 10px;
								box-sizing: border-box;
								& > li{
									flex:1;
									overflow: hidden;
									display: flex;
									align-items: center;
									border: 1px solid #e3e5e4;
									// padding: 2px 0;
									box-sizing: border-box;
									margin-top: 5px;
									.icon{
										width: 50px;
										height: 38px;
										& > div{
											transform: scale(.7) !important;
											margin-top: -5px;
										}
									}
								}
							}
						}
						.midCtnBtm_right_btm{
							flex:1;
							overflow: hidden;
							& > p{
								font-size: 16px;
								text-align: center;
								border-bottom: 1px solid #e3e5e4;
								box-sizing: border-box;
								padding: 5px 0;
							}
							& > ul{
								display: flex;
								padding: 10px;
								box-sizing: border-box;
								& > li{
									flex:1;
									overflow: hidden;
									display: flex;
									align-items: center;
									border: 1px solid #e3e5e4;
									// padding: 2px 0;
									box-sizing: border-box;
									margin-top: 5px;
									.icon{
										width: 50px;
										height: 38px;
										& > div{
											transform: scale(.7) !important;
											margin-top: -5px;
										}
									}
								}
							}
						}
					}
				}
			}
			.rightCtn{
				flex:1.5;
				overflow: hidden;
				border: 1px solid #e3e5e4;
				display: flex;
				flex-direction: column;
				& > div + div{
					border-top: 1px solid #e3e5e4;
					box-sizing: border-box;
				}
				.rightCtn_top{
					// flex:1;
					// overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						height: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 16px;
					}
					.rightCtnWrapper{
						flex:1;
						overflow: hidden;
						display: flex;
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 0 5px 10px 10px;
							box-sizing: border-box;
							& > li{
								display: flex;
								align-items: center;
								border: 1px solid #e3e5e4;
								padding: 2px 10px;
								box-sizing: border-box;
								.svgBox{
									width: 60px;
									height: 25px;
									display: flex;
									align-items: center;
									justify-content: center;
									& > svg{
										width: 100%;
										height: 100%;
									}
								}
								& > p{
									flex:1;
									font-size: 14px;
									overflow: hidden;
								}
							}
						}
					}
				}
				.rightCtn_mid{
					// flex:1;
					// overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						height: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 16px;
					}
					.rightCtnWrapper{
						flex:1;
						overflow: hidden;
						display: flex;
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 0 5px 10px 10px;
							box-sizing: border-box;
							& > li{
								display: flex;
								align-items: center;
								border: 1px solid #e3e5e4;
								padding: 2px 10px;
								box-sizing: border-box;
								.svgBox{
									width: 60px;
									height: 25px;
									display: flex;
									align-items: center;
									justify-content: center;
									& > svg{
										width: 100%;
										height: 100%;
									}
								}
								& > p{
									flex:1;
									font-size: 14px;
									overflow: hidden;
								}
							}
						}
					}
				}
				.rightCtn_btm{
					// flex:1;
					// overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						height: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 16px;
					}
					.rightCtnWrapper{
						flex:1;
						overflow: hidden;
						display: flex;
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 0 5px 10px 10px;
							box-sizing: border-box;
							& > li{
								display: flex;
								align-items: center;
								border: 1px solid #e3e5e4;
								padding: 2px 10px;
								box-sizing: border-box;
								.svgBox{
									width: 60px;
									height: 25px;
									display: flex;
									align-items: center;
									justify-content: center;
									& > svg{
										width: 100%;
										height: 100%;
									}
								}
								& > p{
									flex:1;
									font-size: 14px;
									overflow: hidden;
								}
							}
						}
					}
				}
			}
	  }
	}
}
